<template>
  <div>
    <div v-if="isShowOverview">
      <Card>
        <div slot="title"><p slot="title">总览清单</p></div>
        <Button type="info" @click="backward" icon="ios-arrow-back">返回监控</Button>
        <Button type="primary" @click="exportHistory" style="margin-left:20px">导出历史记录</Button>
        <Button type="success" style="margin-left:20px" @click="sendEmail">发送邮件</Button>
        <Table border height="600" :columns="colData" :data = historyData style="margin-top:20px"></Table>
      </Card>
    </div>
    <Row :gutter="20" v-else>
      <i-col :span="18">
        <div>
          <Card class="player-card" :bordered="false">
            <p slot="title" @click="triggerEvent">当前视频状态: {{videoStatus.content}}</p>
            <div slot="extra" style="margin-top: 12px;">
              <RadioGroup v-model="switchWay" type="button" style="margin-right:20px">
                <Radio
                  label="视频一"
                  style="padding-top:6px;height:45px;background-color:rgba(0,0,0,0);font-size:20px;color:#fff;font-weight:bold;"
                ></Radio>
                <Radio
                  label="视频二"
                  style="padding-top:6px;height:45px;background-color:rgba(0,0,0,0);font-size:20px;font-weight:bold;"
                ></Radio>
              </RadioGroup>
              <Tag type="dot" color="success" v-if="videoStatus.online"></Tag>
              <Tag type="dot" color="warning" v-else></Tag>
            </div>
            <div>
              <flv-video-player></flv-video-player>
            </div>
          </Card>
        </div>
      </i-col>
      <i-col :span="6">
        <Button type="success" @click="overview">总览清单</Button>
        <RecordTable :historyData="historyData" style="margin-top:10px;" />
      </i-col>
    </Row>
    <Notice :isNoticeVisible="isVisible" :noticeContent="noticeContent" @close="isVisible = false" />
    <Alert :isAlertVisible="isAlertVisible" alertMsg="是否发送邮件？" @alertCancel="isAlertVisible = false" @alertConfirm="alertConfirm"/>
  </div>
</template>

<script>
import { mapActions, mapState,mapGetters } from "vuex";
import FlvVideoPlayer from "./flvVideoPlayer";

import Notice from "./Notice";
import RecordTable from "./RecordTable";
import Alert from "@/components/Alert/Alert.vue"

export default {
  components: {
    FlvVideoPlayer,
    Notice,
    RecordTable,
    Alert
  },
  computed: {
    ...mapState(["videoStatus", "historyData"]),
    ...mapGetters(["todayCurrentTime"])
  },
  watch:{
      videoStatus:{
          deep:true,
          handler:function(val,oldval){
              if(val.content !== "正常"){
                  if(this.isVisible === false && val.content !== oldval.content && this.isShowOverview === false){
                      this.noticeContent = val.content
                      this.isVisible = true
                  }
              }
              if(val.online === false && oldval.online === true){
                   this.noticeContent = "断开连接"
                   this.isVisible = true
              }
          }
      },
      switchWay(val){
        clearInterval(this.timer);
        let channel = val ==="视频一"?"1":"2"
        let params = {
          channel:channel,
          switch:"1"
        }
        this.getVideoInfo(params)
        this.getVideoStatus(channel)
      }
  },
  methods: {
    ...mapActions(["getVideoInfo","handleTrigger"]),
    gobackVideoGridPages() {
      this.$emit("close");
    },
    exportHistory() {
        this.exportExcel()
    },
    sendEmail(){
      this.isAlertVisible = true
    },
    overview(){
      this.isShowOverview = true
    },
    backward(){
      this.isShowOverview = false
    },
    triggerEvent(){
      this.handleTrigger()
    },
    alertConfirm(){
        this.isAlertVisible = false
        this.$Message.error({
            content:"邮件发送失败",
            duration:3
        })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    getVideoStatus(data){
      let params = {
        channel:data
      }
      this.timer = setInterval(() => {
      this.getVideoInfo(params);
    }, 1000);
    },
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/Export2Excel");
        const tHeader = ["时间", "异常状态"];
        // 上面设置Excel的表格第一行的标题
        const filterVal = ["datetime", "status"];
        // 上面的index、nickName、name是tableData里对象的属性
        const list = this.historyData; //把data里的tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(
          tHeader,
          data,
          this.todayCurrentTime + "视频状态历史记录"
        );
      });
    }
  },
  data() {
    return {
      timer: 0,
      isVisible: false,
      isAlertVisible:false,
      noticeContent:"",
      disConnected:false,
      switchWay:"视频一",
      isShowOverview:false,
       colData:[
                {title:"时间",key:"datetime",align: "center"},
                {title:"异常状态",key:"status",align:"center"}
            ]
    };
  },
  mounted() {
    let params = {
      channel:"1",
      switch:"1"
    }
    this.getVideoInfo(params)
    this.getVideoStatus("1")
  },
  destroyed() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.player-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 80px;
}
.player-card .ivu-card-head p {
  font-size: 4rem;
  height: 80px;
  line-height: 80px;
  color: #fff;
  text-align: left;
}
.player-card .ivu-card-body {
  padding: 0px;
}
.player-card .ivu-radio-wrapper-checked {
  border-color: #fa541c !important;
  color: #fa541c !important;
}
</style>